var nameLine = [];
var valueLine = [];
var codeLine = [];
var table={};
var cols_arr = [];

$(function() {
    var myDate = new Date();
    var begingTimes = myDate.getHours()-5 + ":"+ myDate.getMinutes() + ":" + myDate .getSeconds();


    var endTimes = myDate.getHours() + ":"+ myDate.getMinutes() + ":" + myDate .getSeconds();
    this.cols_arr = [{'CODE':'G20191010009','DATE':begingTimes,'TIME':endTimes,'LENGTH':'5','STATUS':'准备','JINDU':'23'},
        {'CODE':'G20191010008','DATE':begingTimes,'TIME':endTimes,'LENGTH':'7','STATUS':'准备','JINDU':'43'},
        {'CODE':'G20191010007','DATE':begingTimes,'TIME':endTimes,'LENGTH':'2','STATUS':'准备','JINDU':'53'},
        {'CODE':'G20191010006','DATE':begingTimes,'TIME':endTimes,'LENGTH':'4','STATUS':'准备','JINDU':'21'},
        {'CODE':'G20191010005','DATE':begingTimes,'TIME':endTimes,'LENGTH':'3','STATUS':'准备','JINDU':'43'}];
    renderTable(this.cols_arr);
    sevenTable(this);
    ycqkTable(this);
    var myChart = echarts.init(document.getElementById('sevenBroken'));
    this.colsBroken = [
        {"CODE":'机台1',"NAME":'20190921',"VALUE":'0.04'},
        {"CODE":'机台1',"NAME":'20190922',"VALUE":'0.54'},
        {"CODE":'机台1',"NAME":'20190923',"VALUE":'0.1'},
        {"CODE":'机台1',"NAME":'20190924',"VALUE":'0.3'},
        {"CODE":'机台1',"NAME":'20190925',"VALUE":'0.4'},
        {"CODE":'机台1',"NAME":'20190926',"VALUE":'0.5'},
        {"CODE":'机台1',"NAME":'20190927',"VALUE":'0.9'},
        {"CODE":'机台2',"NAME":'20190921',"VALUE":'0.04'},
        {"CODE":'机台2',"NAME":'20190922',"VALUE":'0.54'},
        {"CODE":'机台2',"NAME":'20190923',"VALUE":'0.1'},
        {"CODE":'机台2',"NAME":'20190924',"VALUE":'0.3'},
        {"CODE":'机台2',"NAME":'20190925',"VALUE":'0.4'},
        {"CODE":'机台2',"NAME":'20190926',"VALUE":'0.5'},
        {"CODE":'机台2',"NAME":'20190927',"VALUE":'0.9'},
        {"CODE":'机台3',"NAME":'20190921',"VALUE":'0.04'},
        {"CODE":'机台3',"NAME":'20190922',"VALUE":'0.54'},
        {"CODE":'机台3',"NAME":'20190923',"VALUE":'0.1'},
        {"CODE":'机台3',"NAME":'20190924',"VALUE":'0.3'},
        {"CODE":'机台3',"NAME":'20190925',"VALUE":'0.4'},
        {"CODE":'机台3',"NAME":'20190926',"VALUE":'0.5'},
        {"CODE":'机台3',"NAME":'20190927',"VALUE":'0.9'}];
    sevenBroken(myChart,this.colsBroken);
});
function renderTable(orderList){
    if(orderList){
        var trHtml = [];
        for(var i in orderList) {
            trHtml.push("<tr>");
            trHtml.push("<td align='center' class='addTr_title' style='width: 10%;height: 30px'>" + orderList[i].CODE + "</td>");
            trHtml.push("<td align='center' class='addTr_title' style='width: 10%;height: 30px'>" + orderList[i].DATE + "</td>");
            trHtml.push("<td align='center' class='addTr_title' style='width: 10%;height: 30px'>" + orderList[i].TIME + "</td>");
            trHtml.push("<td align='center' class='addTr_title' style='width: 10%;height: 30px'>" + orderList[i].LENGTH + "</td>");
            trHtml.push("<td align='center' class='addTr_title' style='width: 10%;height: 30px'>" + orderList[i].STATUS + "</td>");
            trHtml.push("<td align='center' class='addTr_title' style='width: 10%;height: 30px'> <div class ='test'>" +
                "<div id='progress_"+(i)+"' class='kuandu'></div></div></td>");
            trHtml.push("</tr>");

        }
        trHtml = trHtml.join("");

        $("#addTr").after(trHtml);
        haha(orderList);
    }
}


function sevenTable(_self) {
    var myDate = new Date();
    _self.sevenData = [{
        'DATA': myDate.toLocaleDateString(),
        'QTY': '600',
        'HGQTY': '598',
        'BHGQTY': '2',
        'BHGBL': '0.33%'
    },
        {'DATA': myDate.toLocaleDateString(), 'QTY': '700', 'HGQTY': '695', 'BHGQTY': '5', 'BHGBL': '0.71%'},
        {'DATA': myDate.toLocaleDateString(), 'QTY': '650', 'HGQTY': '650', 'BHGQTY': '0', 'BHGBL': '0.00%'},
        {'DATA': myDate.toLocaleDateString(), 'QTY': '600', 'HGQTY': '598', 'BHGQTY': '2', 'BHGBL': '0.33%'},
        {'DATA': myDate.toLocaleDateString(), 'QTY': '700', 'HGQTY': '695', 'BHGQTY': '5', 'BHGBL': '0.71%'},
        {'DATA': myDate.toLocaleDateString(), 'QTY': '650', 'HGQTY': '650', 'BHGQTY': '0', 'BHGBL': '0.00%'},
        {'DATA': myDate.toLocaleDateString(), 'QTY': '650', 'HGQTY': '650', 'BHGQTY': '0', 'BHGBL': '0.00%'}];
    layui.use('table', function () {
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#sevenDate'
            ,width:550
            ,height: 210
            , skin: 'nob'
            , cols: [[
                {type: 'numbers', fixed: 'left', title: '序号'}
                , {field: 'DATA', title: '日期', align: 'center'}
                , {field: 'QTY', title: '产量', align: 'center'}
                , {field: 'HGQTY', title: '合格数', align: 'center'}
                , {field: 'BHGQTY', title: '不合格数', align: 'center'}
                , {field: 'BHGBL', title: '不合格占比', align: 'center'}
            ]]
            , id: 'sevenDate'
            , data: _self.sevenData
            , page: false
            ,done: function(res, curr, count){
                for(var i=0;i<$('tr').length;i++){
                   $('tr')[i].style.height="15";
                }
            }

        });
    })
}

function ycqkTable(_self) {
    var myDate = new Date();
    _self.ycqkData = [
        {'DATA': '机台', 'QTY': '断纱线', 'HGQTY': myDate.toLocaleDateString(), 'BHGQTY': '待处理', 'BHGBL': '0.71%'},
        {'DATA': '机台', 'QTY': '电机故障', 'HGQTY': myDate.toLocaleDateString(), 'BHGQTY': '处理中', 'BHGBL': '0.00%'},
       /* {'DATA': '机台', 'QTY': '电机故障', 'HGQTY': myDate.toLocaleDateString(), 'BHGQTY': '维修中', 'BHGBL': '0.33%'},
        {'DATA': '机台', 'QTY': '断纱线', 'HGQTY': myDate.toLocaleDateString(), 'BHGQTY': '待处理', 'BHGBL': '0.71%'}*/];
    layui.use('table', function () {
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#ycqkDate'
            , skin: 'nob'
            , cols: [[
                {type: 'numbers', fixed: 'left', title: '序号', height: 10}
                , {field: 'DATA', title: '机台', align: 'center', height: 10}
                , {field: 'QTY', title: '异常原因', align: 'center', height: 10}
                , {field: 'HGQTY', title: '上报时间', align: 'center', height: 10}
                , {field: 'BHGQTY', title: '状态', align: 'center', height: 10}
            ]]
            , id: 'ycqkDate'
            , data: _self.ycqkData
            , page: false
            , size: 10

        });
    })
}


    function sevenBroken(id, data) {
        for(var i in data){
            nameLine.push(data[i].NAME);
            valueLine.push(data[i].VALUE);
            codeLine.push(data[i].code)
        }
        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['机台1','机台2','机台3']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['20190924','20190925','20190926','20190927','20190928','20190929','20190939']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'机台1',
                    type:'line',
                    stack: '总量',
                    data:[6, 6, 4, 4, 6, 8, 5]
                },
                {
                    name:'机台2',
                    type:'line',
                    stack: '总量',
                    data:[7, 3, 7, 6, 8, 2, 3]
                },
                {
                    name:'机台3',
                    type:'line',
                    stack: '总量',
                    data:[5, 4, 6, 7, 3, 7, 2]
                }
            ]
        };
    id.setOption(option);
}

function haha(orderList){
    for(var i in orderList) {
        var jindutiao = document.getElementById("progress_" + i);
        jindutiao.style.width = orderList[i].JINDU + "%";
        jindutiao.innerHTML = jindutiao.style.width;
    }
}


